<template>
  <div class="w-full h-32 pl-10 pr-10">

    <!-- 笔记 -->
    <CollapseContainer class="mt-5" title="使用说明">
      <markdown-viewer :value="getDoc()" />
    </CollapseContainer>

  </div>
</template>
<script lang="ts" setup>
import { CollapseContainer } from '@/components/Container';
import { MarkdownViewer } from '@/components/Markdown';

</script>

<script lang="ts">
function getDoc() {
  return `

### BasicDrawer
* BasicDrawer 是 vben 对 antd 的 drawer 组件进行的封装，用法和设计思想和 BasicModal 很像
* <a href="https://doc.vvbin.cn/components/drawer.html" target="_blank">vben drawer 官方文档</a>
* <a href="https://www.antdv.com/components/drawer-cn" target="_blank">antd drawer 官方文档</a>

### 开发原则
* 采用父子组件设计，将抽屉中所有业务逻辑封装到一个独立的 Drawer 文件中
* 父组件:
  * 打开抽屉
  * 监听抽屉关闭，然后做业务操作(如刷新): 绑定回调方法
  * 向抽屉中传送数据: 通过 props 方式
  * 接收抽屉返回的数据: 通过 emit 回调方式
* 子组件: 抽屉组件，以 xxxDrawer.vue 命名
  * 关闭抽屉、实现loading动画、业务逻辑
  * 定义抽屉样式: 宽度、按钮、提示等
  * 接受父组件传参: defineProps 方式
  * 返回数据给父组件: emit 回调方式

### 常用属性
* props 属性通过 :xxx 方式指定,

|  属性 | 类型 | 默认值 | 描述 |
| :--- | :--- | :--- | :--- |
| keyboard | boolean | true | 是否支持点击 esc 建关闭|
| closable | boolean | true | 是否显示左上角的关闭按钮|
| loading | boolean | false | 是否显示 loading 动画|
| loadingText | String | false | 加载动画的文字... |
| mask | boolean | false | 是否显示蒙层|
| maskClosable | boolean | true | 点击蒙层，是否可关闭抽屉|
| showFooter | boolean | false | 是否显底部按钮区，页脚默认包含取消和确定按钮|
| footerHeight | number | 60 | 页脚区高度|
| okText | String | 确定 | 确定按钮文字|
| cancelText | String | 取消 | 取消按钮文字|


### 事件

|  事件 | 回调函数  | 描述 |
| :--- | :--- | :--- |
| @ok | (e)=>void | 点击确定时回调, 父子组件中都可以定义 |
| @close | (e)=>void | 点击关闭时回调。父子组件中都可以定义，不冲突。需要注意的是，通过代码直接调用暴露的 closeDrawer 方法关闭时，不会触发。通过点击窗口关闭按钮、取消按钮、蒙层时可触发 |
| @closeFunc |  (e)=>boolean | 关闭前回调: 返回true，则关闭，返回 false 则不关闭。代码直接调用不生效，和@close 一致 |



`;
}

</script>
